<!DOCTYPE html>
<html lang="en" translate="no">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Media player example | Mediabunny</title>
		<script type="module" src="../base.ts"></script>
		<script type="module" src="./media-player.ts"></script>
		<link rel="stylesheet" href="../base.css">
		<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
	</head>

	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2 h-svh">
		<h1 class="text-3xl font-bold text-purple-500 text-center">Media player example</h1>
		<p class="max-w-lg text-center">Select or drop a media file, and a fully custom, Mediabunny-powered player will appear.</p>

		<div class="flex flex-col items-center gap-1">
			<div class="flex gap-2 mt-4">
				<button id="select-file" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
					Select local file
				</button>

				<button id="load-url" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
					Load remote URL
				</button>
			</div>

			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="hover:underline text-xs opacity-50 hover:opacity-70">
				Download sample file
			</a>
		</div>

		<p class="text-xs opacity-60 mt-2" id="file-name"></p>

		<hr class="w-full max-w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">

		<p id="error-element" class="text-red-500"></p>
		<p id="warning-element" class="text-amber-500 mb-1"></p>
		<p id="loading-element" class="text-sm animate-pulse text-zinc-500" style="display: none;">Loading...</p>

		<div id="player" class="relative bg-black rounded-xl shrink min-h-14 min-w-0 w-full max-w-5xl overflow-hidden select-none" style="display: none;">
			<canvas class="size-full object-contain" width="1280" height="720"></canvas>

			<div class="bg-zinc-900/50 absolute left-0 right-0 bottom-0 h-10 items-center flex m-2 rounded-lg text-white transition-opacity" id="controls" style="opacity: 0;">
				<button class="p-2 group outline-none" id="play-button">
					<div class="size-6 invert group-hover:scale-110">
						<img src="../../docs/assets/play-icon.svg" class="size-full" id="play-icon">
						<img src="../../docs/assets/pause-icon.svg" class="size-full" id="pause-icon" style="display: none;">
					</div>
				</button>

				<div class="hidden sm:flex items-center">
					<button class="p-2 mr-1 group" id="volume-button">
						<div class="size-6 invert group-hover:scale-110" id="volume-icon-wrapper">
							<img src="../../docs/assets/volume-off-icon.svg" class="size-full">
							<img src="../../docs/assets/volume-x-icon.svg" class="size-full">
							<img src="../../docs/assets/volume-0-icon.svg" class="size-full">
							<img src="../../docs/assets/volume-1-icon.svg" class="size-full">
							<img src="../../docs/assets/volume-2-icon.svg" class="size-full">
						</div>
					</button>

					<div class="w-16 relative rounded-full bg-zinc-800/75 h-1.5 group touch-none" id="volume-bar-container">
						<div class="absolute h-full top-0 left-0 rounded-full bg-zinc-200 group-hover:bg-white" id="volume-bar">
							<div class="size-3 rounded-full bg-zinc-200 absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 group-hover:scale-110 group-hover:bg-white group-hover:shadow"></div>
						</div>
					</div>
				</div>

				<p id="current-time" class="tabular-nums w-10 sm:w-24 text-right text-sm"></p>

				<div class="flex-1 relative rounded-full bg-zinc-800/75 h-2 mx-4 group touch-none" id="progress-bar-container">
					<div class="absolute h-full top-0 left-0 rounded-full bg-zinc-200 group-hover:bg-white" id="progress-bar">
						<div class="size-4 rounded-full bg-zinc-200 absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 group-hover:scale-110 group-hover:bg-white group-hover:shadow"></div>
					</div>
				</div>

				<p id="duration" class="tabular-nums w-10 sm:w-24 text-sm"></p>

				<button class="p-2 group outline-none" id="fullscreen-button">
					<div class="size-6 invert group-hover:scale-110">
						<img src="../../docs/assets/fullscreen-icon.svg" class="size-full">
					</div>
				</button>
			</div>
		</div>

		<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
			<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
			<p class="text-sm font-medium">Mediabunny</p>
		</a>

		<a
			href="https://github.com/Vanilagy/mediabunny/tree/main/examples/media-player"
			target="_blank"
			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
		>
			<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
			<p>View source code</p>
		</a>
	</body>
</html>
